<template>
  <div class="big-screen flex flex-col">
    <!-- 动态粒子背景 -->
    <!-- <div class="absolute inset-0">
      <div v-for="(particle, index) in particles" :key="index" class="absolute bg-white rounded-full particle" :style="{
        width: particle.size + 'px',
        height: particle.size + 'px',
        top: particle.top + 'vh',
        left: particle.left + 'vw',
        animationDuration: particle.duration + 's',
        animationDelay: particle.delay + 's',
        background: 'rgba(255, 255, 255, 0.5)',
      }"></div>
    </div> -->

    <div v-show="isLoading" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div class="loading"></div>
    </div>

    <h1 class="text-2xl font-bold p-3 flex justify-center items-center">
      <div class="absolute left-5">
        <div class="flex flex-row items-center">
          <span>{{ currentTime }}</span>
          <div class="flex flex-row text-sm ml-4">
            <span class="mx-2">{{ currentWeek }}</span>
            <span>{{ currentDate }}</span>
          </div>
        </div>
      </div>
      <span>第三师经济形势分析预测可视化展板</span>
    </h1>

    <PopulationFlow1
      v-if="activeIndex === 1 && true"
      v-show="activeIndex === 1"
      @mounted="reloadedComponentInfo.populationFlow1 = true"
    >
      <slot></slot>
    </PopulationFlow1>

    <PopulationFlow
      v-if="activeIndex === 0"
      v-show="activeIndex === 0"
      @mounted="reloadedComponentInfo.populationFlow = true"
    >
      <slot></slot>
    </PopulationFlow>

    <LogisticsFlow
      v-if="activeIndex === 2"
      v-show="activeIndex === 2"
      @mounted="reloadedComponentInfo.logisticsFlow = true"
    >
      <slot></slot>
    </LogisticsFlow>

    <FinancialFlow
      v-if="activeIndex === 3"
      v-show="activeIndex === 3"
      @mounted="reloadedComponentInfo.financialFlow = true"
    >
      <slot></slot>
    </FinancialFlow>

    <EnergyFlow
      v-if="activeIndex === 4"
      v-show="activeIndex === 4"
      @mounted="reloadedComponentInfo.energyFlow = true"
    >
      <slot></slot>
    </EnergyFlow>

    <div
      class="flex flex-row justify-center items-center h-[60px] fixed bottom-[12px] left-0 right-0"
    >
      <div class="arrow left-arrow" @click="prevActive">
        <!-- <span class="text-white">←</span> -->
        <i class="icon-[material-symbols--arrow-back-ios-new] text-[#11CCCC]"></i>
      </div>

      <div class="flex flex-row justify-center items-center">
        <!-- <div class="footer-btn" :class="{ active: activeIndex === 0 }" @click="setActive(0)">
          <span class="icon-[icon-park-outline--family] text-3xl block"></span>
          <span class="text-white text-xs block mt-1">人口流存量</span>
        </div>

        <div
          class="footer-btn ml-[12px]"
          :class="{ active: activeIndex === 1 }"
          @click="setActive(1)"
        >
          <span class="icon-[icon-park-outline--family] text-3xl block"></span>
          <span class="text-white text-xs block mt-1">人口流增量</span>
        </div> -->

        <a-popover trigger="hover">
          <template #content>
            <a-radio-group v-model:value="value1" button-style="solid">
              <a-radio-button value="0" @click="setActive(0)">第一屏</a-radio-button>
              <a-radio-button value="1" @click="setActive(1)">第二屏</a-radio-button>
            </a-radio-group>
          </template>
          <div
            class="footer-btn ml-[12px]"
            :class="{ active: activeIndex === 1 || activeIndex === 0 }"
            @click="setActive(0)"
          >
            <span class="icon-[icon-park-outline--family] text-3xl block"></span>
            <span class="text-white text-xs block mt-1">人口流</span>
          </div>
        </a-popover>
        <div
          class="footer-btn ml-[12px]"
          :class="{ active: activeIndex === 2 }"
          @click="setActive(2)"
        >
          <span class="icon-[icon-park-outline--transporter] text-3xl block"></span>
          <span class="text-white text-xs block mt-1">物流</span>
        </div>

        <div
          class="footer-btn ml-[12px]"
          :class="{ active: activeIndex === 3 }"
          @click="setActive(3)"
        >
          <span class="icon-[icon-park-outline--finance] text-3xl block"></span>
          <span class="text-white text-xs block mt-1">资金流</span>
        </div>

        <div
          class="footer-btn ml-[12px]"
          :class="{ active: activeIndex === 4 }"
          @click="setActive(4)"
        >
          <span class="icon-[icon-park-outline--energy-socket] text-3xl block"></span>
          <span class="text-white text-xs block mt-1">能源流</span>
        </div>
      </div>

      <div class="arrow right-arrow" @click="nextActive">
        <i class="icon-[material-symbols--arrow-forward-ios] text-[#11CCCC]"></i>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import PopulationFlow from './components/population-flow.vue'
import PopulationFlow1 from './components/population-flow1.vue'
import EnergyFlow from './components/energy-flow.vue'
import LogisticsFlow from './components/logistics-flow.vue'
import FinancialFlow from './components/financial-flow.vue'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import dayjs from 'dayjs'
import { useBigScreenStore } from './store'
const bigScreenStore = useBigScreenStore()

const isLoading = computed(() => bigScreenStore.isLoading)

const currentTime = ref('')
const currentWeek = ref('')
const currentDate = ref('')
const value1 = ref<string>('0')

const reloadedComponentInfo = ref({
  populationFlow: false,
  populationFlow1: false,
  logisticsFlow: false,
  financialFlow: false,
  energyFlow: false,
})

/** 英文星期几和中文星期几的映射 */
const weekMap = {
  Monday: '星期一',
  Tuesday: '星期二',
  Wednesday: '星期三',
  Thursday: '星期四',
  Friday: '星期五',
  Saturday: '星期六',
  Sunday: '星期日',
}

/** 刷新时间 */
function refreshTime() {
  const date = new Date()
  currentTime.value = date.toLocaleTimeString()
  currentWeek.value = weekMap[dayjs(date).format('dddd') as keyof typeof weekMap]
  currentDate.value = dayjs(date).format('YYYY-MM-DD')
}

const activeIndex = ref(0)

function setActive(index: number) {
  activeIndex.value = index
  value1.value = index.toString()
}

function prevActive() {
  activeIndex.value = (activeIndex.value - 1 + 5) % 5 // 4是按钮的数量
  if (activeIndex.value == 0 || activeIndex.value == 1) {
    value1.value = activeIndex.value.toString()
  }
}

function nextActive() {
  activeIndex.value = (activeIndex.value + 1) % 5 // 4是按钮的数量
  if (activeIndex.value == 0 || activeIndex.value == 1) {
    value1.value = activeIndex.value.toString()
  }
}

// 粒子数组
const particles = ref<any[]>([])

// 初始化粒子
const createParticles = () => {
  const count = 100 // 粒子数量
  for (let i = 0; i < count; i++) {
    particles.value.push({
      top: Math.random() * 100, // 随机垂直位置
      left: Math.random() * 100, // 随机水平位置
      size: Math.random() * 4 + 2, // 粒子大小：2px - 6px
      duration: Math.random() * 3 + 3, // 动画持续时间：3s - 6s
      delay: Math.random() * 10, // 随机延迟时间
    })
  }
}
const timer = ref<any>(null)

onMounted(() => {
  refreshTime()
  timer.value = setInterval(refreshTime, 1000)
  createParticles()
})

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style scoped>
.footer-btn {
  width: 80px;
  height: 60px;
  background: rgba(170, 187, 204, 0.8);
  backdrop-filter: blur(8px);
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #ddd;
}

.footer-btn:hover {
  transform: translateY(-5px);
  background: rgba(170, 187, 204, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
}

.footer-btn.active {
  background: rgb(102, 204, 204);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
}

.big-screen {
  width: 100vw;
  min-height: calc(100vh - 85px) !important;
  background-image: url('@/assets/bg1.png');
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  background-attachment: fixed;
  /* color: #fff; */
  box-sizing: border-box;
}

.arrow {
  cursor: pointer;
  margin: 0 12px;
  font-size: 24px;
  color: white;
}

.loading {
  display: block;
  position: relative;
  width: 6px;
  height: 10px;

  animation: rectangle infinite 1s ease-in-out -0.2s;

  background-color: #2f88c7;
}

.loading:before,
.loading:after {
  position: absolute;
  width: 6px;
  height: 10px;
  content: '';
  background-color: #2f88c7;
}

.loading:before {
  left: -14px;

  animation: rectangle infinite 1s ease-in-out -0.4s;
}

.loading:after {
  right: -14px;

  animation: rectangle infinite 1s ease-in-out;
}

@keyframes rectangle {
  0%,
  80%,
  100% {
    height: 20px;
    box-shadow: 0 0 #2f88c7;
  }

  40% {
    height: 30px;
    box-shadow: 0 -20px #2f88c7;
  }
}

/* 背景雪花点容器 */
.background-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -2;
}

/* 动态雪花点 */
.dot {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(0, 192, 255, 0.8), transparent);
  border-radius: 50%;
  animation: float 20s infinite;
  opacity: 0.6;
}

/* 雪花点动画 */
@keyframes float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }

  50% {
    transform: translateY(30px) scale(1.2);
    opacity: 0.4;
  }

  100% {
    transform: translateY(-30px) scale(1);
    opacity: 0.8;
  }
}

/* 粒子下落动画 */
@keyframes fall {
  0% {
    transform: translateY(-10vh);
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateY(110vh);
    opacity: 0;
  }
}

.particle {
  animation: fall linear infinite;
}
h1 {
  color: #393939;
  background: #d3dee8;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
</style>
